import React from 'react'
import styled from 'styled-components'


const Popupcontent=styled.div`
    /* position:absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    height:100vh;
    width:100vw;
    background-color:rgba(0,0,0,0.1);
    z-index:99;
    border-radius: 9px;
    .father{
        position:absolute;
        top:39px;
        right:22px; */
    position:absolute;
    top:33px;
    right:63px;
    z-index: 999999999;
    .content{
        width:6rem;
        background-color:white;
        border-radius: 6px;
        .item{
            display: flex;
            align-items: center;
            height: 1rem; 
            .icon{
                margin-left: 0.4rem;
            }
            .text{
                margin-left: 0.4rem;
                border-bottom: 0.6px solid #595959;
                font-family: Microsoft YaHei;
                /* width: 7rem; */
                height: 1rem;
                line-height: 1rem;
            }
            .report{
                border-bottom: none;
            }
        }
    } 
`;

export default function MainPopup(props) {
    const {curtain,handleOnclick,id}=props;
    return(
        <Popupcontent onClick={()=>{
            handleOnclick()
        }} style={curtain==id ?{display:"block"}:{display:"none"}}>
            {/* <div className="father"> */}
                <div className="content">
                    <div className="item">
                        <svg t="1645577818145" className="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2046" width="22" height="22"><path d="M522.518404 0c-276.367246 0-501.223192 224.846728-501.223192 501.203642 0 276.354888 224.855945 501.201616 501.223192 501.201616 276.367246 0 501.224205-224.846728 501.224205-501.201616C1023.742609 224.845715 798.884637 0 522.518404 0zM522.518404 951.639085c-248.389075 0-450.454892-202.056599-450.454892-450.435443 0-248.380972 202.065817-450.437469 450.454892-450.437469s450.455905 202.056599 450.455905 450.437469C972.973296 749.581574 770.907479 951.639085 522.518404 951.639085zM394.853185 257.682616c20.922344 0 37.910987-16.972638 37.910987-37.910379 0-20.936728-16.988541-37.893159-37.910987-37.893159-20.938552 0-37.910987 16.956532-37.910987 37.893159C356.943211 240.709979 373.914532 257.682616 394.853185 257.682616zM650.282791 257.682616c20.922344 0 37.894779-16.972638 37.894779-37.910379 0-20.936728-16.972334-37.893159-37.894779-37.893159-20.938552 0-37.909974 16.956532-37.909974 37.893159C612.371906 240.709979 629.344239 257.682616 650.282791 257.682616zM522.518404 257.682616c20.937539 0 37.912-16.972638 37.912-37.910379 0-20.936728-16.975373-37.893159-37.912-37.893159s-37.910987 16.956532-37.910987 37.893159C484.606404 240.709979 501.580764 257.682616 522.518404 257.682616zM644.465097 674.918824c29.715284-26.161034 67.726452-71.571318 67.726452-132.600833 0-89.816428-71.525634-186.771338-187.077656-186.771338-112.891601 0-182.76521 96.954911-182.76521 186.771338 0 65.970396 32.425238 108.73667 59.97422 133.161705-43.661826 29.81425-92.282057 87.00842-92.282057 176.493815 0 14.012789 11.369285 25.38258 25.384606 25.38258s25.384606-11.369791 25.384606-25.38258c0-112.68658 94.612355-148.102764 98.528939-149.50773 9.701964-3.387011 16.329514-12.327336 16.90558-22.571533 0.562797-10.263342-5.171835-19.88194-14.426377-24.325766-2.809122-1.356446-68.700305-33.910936-68.700305-113.250389 0-65.408613 50.471707-136.005166 131.99691-136.005166 84.200717 0 136.30733 70.597465 136.30733 136.005166 0 68.499133-76.169113 113.778746-76.880813 114.208035-8.525621 4.924674-13.434392 14.325588-12.592122 24.144548 0.826063 9.815921 7.272396 18.243083 16.510731 21.647315 1.025514 0.381579 102.347367 38.985426 102.347367 149.656533 0 14.012789 11.368272 25.38258 25.383593 25.38258 14.014409 0 25.384606-11.369791 25.384606-25.38258C741.573775 755.531661 684.59202 701.210428 644.465097 674.918824z" p-id="2047"></path></svg>
                        <div className="text">帮助中心</div>
                    </div>
                    <div className="item">
                        <svg t="1645578321178" className="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2241" width="24" height="24"><path d="M776.533333 1024c-128 0-233.244444-105.244444-233.244444-233.244444 0-128 105.244444-233.244444 233.244444-233.244445 128 0 233.244444 105.244444 233.244445 233.244445 0 128-105.244444 233.244444-233.244445 233.244444z m0-406.755556c-45.511111 0-91.022222 17.066667-122.311111 51.2-31.288889 31.288889-51.2 76.8-51.2 122.311112 0 34.133333 8.533333 65.422222 28.444445 93.866666L881.777778 654.222222c-31.288889-22.755556-68.266667-36.977778-105.244445-36.977778z m147.911111 82.488889l-253.155555 230.4c31.288889 22.755556 68.266667 36.977778 105.244444 36.977778 45.511111 0 91.022222-17.066667 122.311111-51.2 31.288889-31.288889 51.2-76.8 51.2-122.311111 0-36.977778-8.533333-68.266667-25.6-93.866667z m-344.177777-167.822222c8.533333 2.844444 14.222222 5.688889 22.755555 8.533333h2.844445c14.222222 0 22.755556 8.533333 28.444444 19.911112 5.688889 11.377778 0 25.6-8.533333 34.133333-8.533333 8.533333-22.755556 8.533333-34.133334 2.844444-2.844444 0-5.688889 0-8.533333-2.844444-39.822222-14.222222-96.711111-28.444444-142.222222-28.444445-201.955556 0-361.244444 170.666667-369.777778 369.777778 0 17.066667-5.688889 28.444444-28.444444 28.444445-17.066667 0-28.444444-14.222222-28.444445-31.288889v-2.844445c5.688889-179.2 122.311111-335.644444 292.977778-395.377777-91.022222-48.355556-153.6-142.222222-153.6-253.155556 0-156.444444 128-281.6 284.444444-281.6s284.444444 125.155556 287.288889 281.6c2.844444 108.088889-56.888889 199.111111-145.066666 250.311111zM440.888889 56.888889c-122.311111 0-227.555556 105.244444-227.555556 227.555555s105.244444 227.555556 227.555556 227.555556 227.555556-105.244444 227.555555-227.555556-105.244444-227.555556-227.555555-227.555555z" fill="#2c2c2c" p-id="2242"></path></svg>
                        <div className="text">拉黑</div>
                    </div>
                    <div className="item">
                        <svg t="1645578369950" className="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2848" width="24" height="24"><path d="M730.614 612.961c-27.79 14.626-52.036 35.076-71.115 59.728C615.725 648.664 565.459 635 512 635c-169.551 0-307 137.449-307 307 0 24.3-19.7 44-44 44s-44-19.7-44-44c0-163.047 98.787-303.02 239.774-363.332C279.812 528.088 229 440.978 229 342c0-156.297 126.703-283 283-283s283 126.703 283 283c0 98.978-50.812 186.088-127.774 236.668a394.09 394.09 0 0 1 63.388 34.293zM512 537c107.696 0 195-87.304 195-195s-87.304-195-195-195-195 87.304-195 195 87.304 195 195 195z m252.887 268.8l-64.974-64.973c-17.183-17.183-17.183-45.043 0-62.226s45.043-17.183 62.226 0l64.974 64.974 64.974-64.974c17.183-17.183 45.042-17.183 62.225 0s17.183 45.043 0 62.226L889.338 805.8l64.974 64.974c17.183 17.183 17.183 45.042 0 62.225s-45.042 17.183-62.225 0l-64.974-64.974L762.139 933c-17.183 17.183-45.043 17.183-62.226 0s-17.183-45.042 0-62.225l64.974-64.974z" p-id="2849"></path></svg>
                        <div className="text">屏蔽</div>
                    </div>
                    <div className="item">
                    <svg t="1645578442197" className="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3739" width="22" height="22"><path d="M512 12.624658C235.660274 12.624658 11.221918 238.465753 11.221918 513.40274c0 276.339726 224.438356 500.778082 500.778082 500.778082 276.339726 0 500.778082-224.438356 500.778082-500.778082C1012.778082 238.465753 788.339726 12.624658 512 12.624658z m0 70.136986c106.608219 0 203.39726 39.276712 277.742466 102.4L183.758904 792.547945c-64.526027-75.747945-102.4-172.536986-102.4-277.742466 0-238.465753 193.578082-432.043836 430.641096-432.043835z m0 861.282192c-106.608219 0-203.39726-39.276712-277.742466-102.4l605.983562-605.983562c64.526027 75.747945 102.4 172.536986 102.4 277.742466 0 238.465753-193.578082 430.641096-430.641096 430.641096z" p-id="3740"></path></svg>
                        <div className="text">不想看</div>
                    </div>
                    <div className="item">
                        <svg t="1645578488762" className="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4624" width="25" height="25"><path d="M362.268444 358.513778C311.296 409.372444 283.306667 477.070222 283.306667 548.977778v198.656c0 18.887111 15.246222 34.133333 34.133333 34.133333h470.584889c18.887111 0 34.133333-15.246222 34.133333-34.133333V566.613333c0-1.592889-0.113778-3.072-0.341333-4.664889 0.227556-4.323556 0.341333-8.647111 0.341333-12.970666 0-72.021333-27.989333-139.605333-78.961778-190.464-50.858667-50.858667-118.556444-78.961778-190.464-78.961778s-139.605333 28.103111-190.464 78.961778z m391.623112 190.464c0 4.892444-0.227556 10.012444-0.568889 15.018666-0.227556 3.072 0 6.144 0.568889 9.102223v140.401777H351.573333V548.977778c0-110.933333 90.225778-201.159111 201.159111-201.159111S753.891556 438.044444 753.891556 548.977778z" fill="#2c2c2c" p-id="4625"></path><path d="M450.104889 429.397333C367.274667 498.346667 389.12 617.358222 390.030222 622.478222c3.185778 16.384 17.408 27.648 33.450667 27.648 2.161778 0 4.323556-0.227556 6.485333-0.568889 18.545778-3.527111 30.606222-21.504 27.079111-39.936-0.113778-0.796444-14.677333-84.878222 36.636445-127.658666 14.449778-12.060444 16.384-33.564444 4.323555-48.128-11.946667-14.563556-33.450667-16.497778-47.900444-4.437334zM267.264 397.880889c11.377778 0 22.414222-5.688889 28.899556-16.042667 10.012444-15.928889 5.233778-37.091556-10.808889-47.104l-53.475556-33.564444c-15.928889-10.012444-37.091556-5.233778-47.104 10.808889-10.012444 15.928889-5.233778 37.091556 10.808889 47.104l53.475556 33.564444c5.688889 3.527111 11.946667 5.233778 18.204444 5.233778zM337.692444 248.945778c5.575111 12.970667 18.204444 20.707556 31.402667 20.707555 4.437333 0 8.988444-0.910222 13.425778-2.730666 17.294222-7.395556 25.372444-27.420444 17.976889-44.828445l-24.803556-58.026666c-7.395556-17.294222-27.420444-25.372444-44.828444-17.976889-17.294222 7.395556-25.372444 27.420444-17.976889 44.828444l24.803555 58.026667zM534.983111 243.484444h1.820445c18.090667 0 33.109333-14.108444 34.019555-32.312888l3.299556-63.032889c1.024-18.773333-13.539556-34.929778-32.312889-35.84-18.773333-1.024-34.929778 13.539556-35.84 32.312889l-3.299556 63.032888c-0.910222 18.773333 13.539556 34.816 32.312889 35.84zM854.471111 815.900444H269.653333c-18.887111 0-34.133333 15.246222-34.133333 34.133334s15.246222 34.133333 34.133333 34.133333h584.817778c18.887111 0 34.133333-15.246222 34.133333-34.133333s-15.246222-34.133333-34.133333-34.133334z" fill="#2c2c2c" p-id="4626"></path></svg>
                        <div className="text report">举报</div>
                    </div>
                    
                </div>
            {/* </div> */}
        </Popupcontent>
    )
}
